<template>
  <div
    class="department"
  >
    <DepartmentTree @current-change="currentChange" />
    <DepartmentContent :ou="currentOu" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DepartmentTree from './departmentTree.vue'
import DepartmentContent from './departmentContent.vue'
import { IDepartment } from '@/http/types/department'

// const currentOuId = ref('')
const currentOu = ref<IDepartment>({
  id: '',
  parentId: '',
  displayName: '',
  children: []
})
const currentChange = (data:IDepartment) => {
  // currentOuId.value = id
  currentOu.value = data
}
</script>

<style scoped lang="scss">
.department{
  display: flex;
  .departmentTree{
    margin-right: 20px;
  }
  .departmentContent{
    flex: 1;
  }
}
</style>
